<template>
  <div class="index">
    <div class="page-name">用户管理</div>

    <div class="searchbar">
      <el-form :model="query" :inline="true">
        <el-form-item label="部门">
          <tree-department-select
            v-model="query.department_ids"
            multiple
          ></tree-department-select>
        </el-form-item>
        <el-form-item label="角色">
          <role-select v-model="query.role_id"></role-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="query.account" />
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="query.phone" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="query.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="toolbar">
      <el-button type="primary" :icon="Plus" @click="openAdd">添加</el-button>
    </div>

    <div class="list">
      <el-table
        :data="users"
        v-loading="listLoading"
        stripe
        table-layout="auto"
        class="table"
      >
        <el-table-column v-slot="{ row }" prop="account" label="账号">
          <a
            :href="'/system/user/detail-' + row.id"
            target="_blank"
            class="account"
          >
            <el-avatar :size="30" :src="row.avatar_url" />
            <span class="account__account">{{ row.account }} </span>
          </a>
        </el-table-column>
        <el-table-column prop="name" label="姓名" />
        <el-table-column v-slot="{ row }" prop="department_name" label="部门">
          {{ row.department?.name }}
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" />
        <el-table-column v-slot="{ row }" prop="add_time" label="添加时间">
          {{ dayjs.unix(row.add_time).format("YYYY-MM-DD HH:mm:ss") }}
        </el-table-column>
        <el-table-column v-slot="{ row }" prop="status" label="状态">
          <el-switch
            :model-value="row.status == 1 ? true : false"
            @change="editStatus(row)"
          />
        </el-table-column>
        <el-table-column
          v-slot="{ row }"
          label="操作"
          fixed="right"
          width="150"
        >
          <el-button size="small" @click="openEdit(row.id)">修改</el-button>
          <el-dropdown style="margin-left: 16px">
            <el-button size="small">
              更多
              <el-icon><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openEditPassword(row.id)"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item @click="offLine(row.id)">
                  踢下线
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="total,->,sizes,jumper,prev, pager, next"
        :page-sizes="[10, 30, 50, 100, 200, 300]"
        v-model:page-size="query.size"
        :total="total"
        @size-change="changePaginationSize"
        @current-change="changePaginationCurrent"
      />
    </div>

    <add
      @close="addFlag = false"
      @submited="
        getPaginate();
        addFlag = false;
      "
      v-if="addFlag"
    ></add>
    <edit
      @close="editFlag = false"
      @submited="
        getPaginate();
        editFlag = false;
      "
      :id="rowId"
      v-if="editFlag"
    ></edit>
    <EditPassword
      :open="editPasswordFlag"
      :id="rowId"
      @close="editPasswordFlag = false"
      @submited="editPasswordFlag = false"
      v-if="editPasswordFlag"
    ></EditPassword>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import axios from "@/helper/axios";
import dayjs from "dayjs";
import { Search, ArrowDown, Plus } from "@element-plus/icons-vue";
import Add from "./Add.vue";
import Edit from "./Edit.vue";
import EditPassword from "./EditPassword.vue";

const query = ref({
  size: 30,
  page: 1,
});
const listLoading = ref(true);
const users = ref([]);
const total = ref(0);
const rowId = ref(0);
const addFlag = ref(false);
const editFlag = ref(false);
const editPasswordFlag = ref(false);

/**
 * 得到分页
 */
const getPaginate = async () => {
  listLoading.value = true;
  const response = await axios.get("desktop/system.user.Index/getPaginate", {
    params: query.value,
  });
  listLoading.value = false;
  if (response.code != 1) {
    ElMessage({
      message: response.message,
      type: "error",
    });
    return;
  }
  users.value = response.data.data;
  total.value = response.data.total;
};

/**
 * 搜索
 */
const search = () => {
  query.page = 1;
  getPaginate();
};

/**
 * 改变分页显示条数
 * @param {number} size
 */
const changePaginationSize = (size) => {
  query.value.size = size;
  query.value.page = 1;
  getPaginate();
};

/**
 * 改变分页当前页
 * @param {*} page
 */
const changePaginationCurrent = (page) => {
  query.value.page = page;
  getPaginate();
};

/**
 * 打开添加
 */
const openAdd = () => {
  addFlag.value = true;
};

/**
 * 打开修改
 */
const openEdit = (id) => {
  rowId.value = id;
  editFlag.value = true;
};

/**
 * 修改状态
 * @param {number} id 记录id
 */
const editStatus = async (row) => {
  row.status = row.status == 1 ? 0 : 1;
  const response = await axios.post("desktop/system.user.Index/editStatus", {
    id: row.id,
    status: row.status,
  });
  if (response.code != 1) {
    ElMessage({
      message: response.message,
      type: "error",
    });
    return;
  }
  ElMessage({
    message: response.message,
    type: "success",
  });
};

/**
 * 打开修改密码
 * @param {number} id 记录id
 */
const openEditPassword = async (id) => {
  rowId.value = id;
  editPasswordFlag.value = true;
};

/**
 * 踢下线
 * @param {number} id 记录id
 */
const offLine = async (id) => {
  let response = await ElMessageBox.confirm("确定将用户踢下线吗？", "提示", {
    draggable: true,
  });

  response = await axios.post("desktop/system.user.Index/offLine", {
    id: id,
  });
  if (response.code != 1) {
    ElMessage({
      message: response.message,
      type: "error",
    });
    return;
  }
  ElMessage({
    message: response.message,
    type: "success",
  });
};

onMounted(() => {
  getPaginate();
});
</script>

<style lang="scss" scoped>
.index {
  background-color: var(--background-color-light);
  padding: var(--padding);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  .page-name {
    font-size: var(--font-size-lg);
  }
  .searchbar {
    margin-top: var(--margin);
    .el-select {
      min-width: 198px;
    }
  }
  .toolbar {
  }
  .list {
    margin-top: var(--margin);
    :deep(th.el-table__cell) {
      background-color: var(--background-color-dark);
    }
    .table {
      width: 100%;
      .account {
        display: flex;
        align-items: center;
        .account__account {
          margin-left: var(--margin-sm);
        }
      }
    }
  }
  .pagination {
    margin-top: var(--margin);
  }
}
</style>
